<template>
  <div>
    <button v-for="item in menus" :key="item.key" @click="handleClick(item)">{{ item.title }}</button>
    <div>
      <div>
        <!-- 主应用渲染区，用于挂载主应用路由触发的组件 -->
        <router-view v-show="$route.name" />
      </div>
      <div>
        <!-- 子应用渲染区，用于挂载子应用节点 -->
        <section v-show="!$route.name" id="frame"></section>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: [
        {
          key: "Home",
          title: "主应用",
          path: "/",
          name: "main",
        },
        {
          key: "VueMicroApp",
          title: "子应用",
          path: "/vue",
          name: "one",
        }
      ],
      activeName: "main",
    };
  },
  methods: {
    handleClick(tab) {
      const path = tab.path;
      this.$router.push(path);
    },
  },
};
</script>
